<template>
  <div>
    
    <el-dialog
      v-model="dialogVisible_ZhiFu"
      title="支付"
      class="el-dialog_zhifu"
      :before-close="handleClose"
    >
      <template #footer>
        <el-container>
          <!-- 左侧内容 -->
          <div class="left">
            <div class="person_message">客户信息</div>
            <div class="person_message_div1">
              <div class="zhuoci">{{ (user_info as any).Table_times}}</div>
              <div class="NB">
                <div class="name">{{ (user_info as any).username }}</div>
                <div class="bianhao">#{{ (user_info as any).num }}&nbsp;/&nbsp;用餐</div>
              </div>
            </div>

            <div class="div_jiaoyi">
              <div
                ref="container"
                class="jioayi_content"
                v-infinite-scroll="load"
                :infinite-scroll-disabled="disabled"
              >
                <div class="jiaoyi_title">交易明细</div>

                <div
                  class="jiaoyi_item"
                  v-for="item in list.slice(0,count)"
                  :key="(item as any)._id"
                >
                  <div class="DuiQi">
                    <div class="cai_name">{{(item as any).name}}</div>
                    <div class="cai_num">×{{(item as any).num}}</div>
                  </div>
                  <div class="cai_price">￥{{(item as any).price}}</div>
                </div>
                <p class="loading" v-if="loading" v-loading="loading1"></p>
                <p class="noMore" v-if="noMore">没有更多了</p>
              </div>

              <div class="jiaoyi_foot">
                <div class="DuiQi">
                  <div class="xiaoji">小计</div>
                  <div class="xiaoji_price">￥{{total}}</div>
                </div>
                <div class="DuiQi" style="margin-top: 25px">
                  <div class="shui_lv">税率(5%)</div>
                  <div class="shui_lv_price">￥{{tax.toFixed(2)}}</div>
                </div>

                <div class="DuiQi" style="margin-top: 30px">
                  <div class="Shi_Fu">实付</div>
                  <div class="Shi_Fu_price">￥{{maxtotal.toFixed(2)}}</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧内容 -->
          <div class="right">
            <div class="fukuan_way">选择付款方式</div>
            <el-select v-model="value" placeholder="请选择支付方式">
              <el-option class="option" label="现金" value="1">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-jinqian1" />
                </svg>
                现金
              </el-option>
              <el-option class="option" label="银行卡" value="2">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-xinyongkayinhangka" />
                </svg>
                银行卡
              </el-option>
              <el-option class="option" label="微信" value="3">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin" />
                </svg>
                微信
              </el-option>
              <el-option class="option" label="支付宝" value="4">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zhifubaozhifu" />
                </svg>
                支付宝
              </el-option>
            </el-select>
            <div>
              <Calculator />
            </div>
          </div>
        </el-container>
      </template>
    </el-dialog>



  </div>
</template>
   
   <script name="Person666" setup lang="ts">
import { ref, onMounted, computed, watchEffect } from "vue";
import axios from "axios";
import Calculator from "./Calculator.vue";
import { useRouter } from "vue-router";
import Homeheader from "@/views/pages/Homeheader.vue";
import Homefooter from "@/views/pages/Homefooter.vue";
import { RouterView } from "vue-router";





onMounted(() => {
  getlist();
});

const router = useRouter();

const value = ref("");
const dialogVisible_ZhiFu = ref(true);
const dialogVisible_JieSuan = ref(false);

let list = ref([]); //后端获取用户点菜的数据
let user_info = ref([]); //后端获取用户信息
let count = ref(4); //前端显示的数据数量
const loading = ref(false);
const loading1 = ref(true);
const noMore = computed(() => count.value >= 10); //判断是否加载完毕
const disabled = computed(() => loading.value || noMore.value);
// 计算总价
const total = computed(() => {
  let sum = 0;
  list.value.forEach((item) => {
    sum += item.price * item.num;
  });
  return sum;
  
});

// 税价
const tax = computed(() => {
  const taxnum = total.value * 0.05;
  return taxnum;
});
// 总价和税价之和
const maxtotal = computed(() => {
  const max = total.value * 1.05;
  return max;
});

const load = () => {
  loading.value = true; //加载2s后显示
  setTimeout(() => {
    count.value += 4; //每次加载的数量
    loading.value = false; //加载2s前消失
  }, 3000);
};

const handleClose = () => {
  dialogVisible_ZhiFu.value = false;
};

async function getlist() {
  let { data } = await axios.get("http://localhost:3000/list");
  user_info.value = data.list.find(item=>item._id==JSON.parse(localStorage.getItem('uid')))
  list.value = data.list.find(item=>item._id==JSON.parse(localStorage.getItem('uid'))).user_list;
}

watchEffect(() => {
  console.log("list", list.value.length);
  console.log("count的数量", count.value);
  console.log("noMored的状态", noMore.value);
});

const index = ref(0);


</script>
   <style lang="less" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  color: #3984d8;
}
.loading {
  margin-top: 50px;
}
.noMore {
  text-align: center;
}
.jioayi_content::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

.left {
  width: 52%;
  // border: 1px solid red;
  // padding-top: 30px;
  padding-left: 60px;
  .title {
    font-size: 40px;
    font-weight: bold;
    //    border: 1px solid red;
    text-align: left;
  }
  .person_message {
    font-size: 30px;
    font-weight: bold;
    //    border: 1px solid red;
    text-align: left;
  }
  .person_message_div1 {
    width: 280px;
    height: 100px;
    display: flex;
    //    border: 1px solid #000;
    margin-top: 20px;
    .zhuoci {
      width: 100px;
      height: 100px;
      background-color: #f0f8ff;
      color: #3984d8;
      line-height: 100px;
      text-align: center;
      font-size: 25px;
    }
    .NB {
      height: 100px;
      //    border: 1px solid red;
      font-size: 25px;
      .name {
        padding-left: 20px;
        margin-top: 8px;
        //    border: 1px solid #000;
        text-align: left;
      }
      .bianhao {
        padding-left: 20px;
        //    border: 1px solid #000;
      }
    }
  }
  .div_jiaoyi {
    width: 600px;
    margin-top: 30px;
    border: 1px solid #f5f5f5;
    background-color: #f5f5f5;
    border-radius: 20px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 30px;
    .jioayi_content {
      overflow: scroll;
      height: 460px;
      width: 100%;
      // border: 1px solid red;
      .jiaoyi_title {
        background-color: #f5f5f5;
        font-size: 30px;
        text-align: left;
        // margin-top: 10px;
        margin-left: 20px;
        position: sticky;
        top: 0px;
        z-index: 999;
        // border: 1px solid red;
      }
      .jiaoyi_item {
        //    border: 1px solid #000;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 25px;
        .cai_name {
          font-size: 20px;
        }
        .cai_num {
          font-size: 20px;
        }
        .cai_price {
          font-size: 18px;
          font-weight: bold;
          margin-top: 10px;
          text-align: left;
        }
      }
    }

    .jiaoyi_foot {
      //    border: 1px solid #000;
      padding-left: 20px;
      padding-right: 20px;
      margin-top: 20px;
      .xiaoji {
        font-size: 18px;
      }
      .xiaoji_price {
        font-size: 18px;
      }
      .shui_lv {
        font-size: 18px;
      }
      .shui_lv_price {
        font-size: 18px;
      }
      .Shi_Fu {
        font-size: 30px;
      }
      .Shi_Fu_price {
        font-size: 30px;
      }
    }
  }
}
//两端对齐
.DuiQi {
  display: flex;
  justify-content: space-between;
}

.right {
  width: 48%;
  padding-right: 60px;
  padding-left: 20px;
  // border: 1px solid aqua;
  .fukuan_way {
    // border: 1px solid red;
    font-size: 25px;
    margin-top: 10px;
    margin-left: 30px;
    text-align: left;
  }
}
//select
:deep(.el-select__wrapper) {
  width: 500px;
  height: 80px;
  border: 1px solid #1677ff;
  border-radius: 15px;
  font-size: 22px;
}
.option {
  width: 500px;
  font-size: 26px;
  height: 50px;
}
.el-select {
  --el-select-width: 70%;
  margin-top: 20px;
  margin-right: 140px;
}
//整体的模态框
:deep(.el-dialog) {
  width: 1336px;
  height: 1024px;
  margin-top: 0px;
  margin-bottom: 0px;
  box-sizing: border-box;
  padding: 0px;
}
//模态框header部分
:deep(.el-dialog__header) {
  font-weight: bold;
  font-size: 30px;
  padding-top: 40px;
}
//模态框title部分(支付)
:deep(.el-dialog__title) {
  font-weight: bold;
  font-size: 40px;
  margin-left: 60px;
  padding-top: 20px;
}
//模态框右上角的X
:deep(.el-dialog__headerbtn) {
  font-weight: bolder;
  font-size: 40px;
  padding-top: 40px;
  padding-right: 100px;
}

//座位样式 ---------------------------------------------------
.seat_content {
  width: 100%;
  height: 850px;
  background-color: #f5f5f5;
  .seat_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border: 1px solid red;
    .seat_header_title {
      font-size: 30px;
      margin-top: 20px;
      margin-left: 20px;
      margin-bottom: 20px;
      font-weight: bold;
    }
    .seat_header_but {
      display: flex;
      justify-content: space-between;
      width: 220px;
      // border: 1px solid #000;
      margin-right: 40px;
      .seat_header_but_1 {
        width: 100px;
        height: 50px;
        background-color: #fff;
        border: 1px solid #fff;
        border-radius: 10px;
        font-size: 20px;
        cursor: pointer;
      }
      .seat_header_but_2 {
        width: 100px;
        height: 50px;
        background-color: #fff;
        border: 1px solid #fff;
        border-radius: 10px;
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
}
.active {
  width: 100px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  background-color: #dceefe;
  color: #2a77d3;
}
</style>